<template>
  <div class="app-container">
    <div>
      <el-button-group>
        <el-button type="primary" icon="el-icon-download" plain @click="clickDownloadTemplate">下载工资表模板</el-button>
        <el-button type="primary" icon="el-icon-upload" plain @click="clickNewUpload">创建新的工资记录</el-button>
      </el-button-group>

    </div>
    <div style="padding: 10px" />
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="月份" align="center">
        <template slot-scope="scope">
          {{ scope.row.month }}
        </template>
      </el-table-column>

      <el-table-column label="发放人数" align="center">
        <template slot-scope="scope">
          {{ scope.row.totalCnt }}人
        </template>
      </el-table-column>

      <el-table-column label="发放总金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.totalAmount }}元
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ formatTimeStamp(scope.row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-upload
            ref="attaches"
            :action="uploadUrl"
            :on-success="uploadGongziSuccess"
            :show-file-list="false"
            :data="getUploadData(scope.row.id)"
          >
            <el-button size="small" type="primary" plain>点击上传工资表</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" plain @click="onClickDetail(scope.row.id)">查看工资详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px" />
    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageCount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataTotal"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />

    <el-dialog title="请选择月份" width="50%" :visible.sync="newUploadDialog.visible">
      <el-form>
        <el-form-item label="月份">
          <el-date-picker v-model="newUploadDialog.month" type="month" placeholder="选择月" value-format="yyyy-MM" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newUploadDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="newUploadConfirm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="工资表详情" width="80%" :visible.sync="uploadDetailDialog.visible">

      <el-table
        v-loading="uploadDetailDialog.listLoading"
        :data="uploadDetailDialog.list"
        style="width: 100%"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="名称" align="center" fixed>
          <template slot-scope="scope">
            <b style="color: royalblue;">{{ scope.row.name }}</b><br>
            <i>{{ scope.row.uid }}</i>
          </template>
        </el-table-column>

        <el-table-column label="基本工资" align="center">
          <el-table-column label="岗位工资" align="center">
            <template slot-scope="scope">
              {{ scope.row.gangweigongzi }}
            </template>
          </el-table-column>

          <el-table-column label="补发岗位工资" align="center">
            <template slot-scope="scope">
              {{ scope.row.bufagangweigongzi }}
            </template>
          </el-table-column>

          <el-table-column label="薪级工资" align="center">
            <template slot-scope="scope">
              {{ scope.row.xinjigongzi }}
            </template>
          </el-table-column>

          <el-table-column label="补发薪级工资" align="center">
            <template slot-scope="scope">
              {{ scope.row.bufaxinji }}
            </template>
          </el-table-column>

          <el-table-column label="岗位津贴" align="center">
            <template slot-scope="scope">
              {{ scope.row.gangweijintie }}
            </template>
          </el-table-column>

          <el-table-column label="补发岗位津贴" align="center">
            <template slot-scope="scope">
              {{ scope.row.bufagangweijintie }}
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="补贴" align="center">
          <el-table-column label="生活" align="center">
            <template slot-scope="scope">
              {{ scope.row.shenghuobutie }}
            </template>
          </el-table-column>

          <el-table-column label="基础增核" align="center">
            <template slot-scope="scope">
              {{ scope.row.jichuzenghe }}
            </template>
          </el-table-column>

          <el-table-column label="交通" align="center">
            <template slot-scope="scope">
              {{ scope.row.jiaotongbutie }}
            </template>
          </el-table-column>

          <el-table-column label="医疗" align="center">
            <template slot-scope="scope">
              {{ scope.row.yibu }}
            </template>
          </el-table-column>

          <el-table-column label="特岗津贴" align="center">
            <template slot-scope="scope">
              {{ scope.row.tegangjintie }}
            </template>
          </el-table-column>

          <el-table-column label="补发特岗津贴" align="center">
            <template slot-scope="scope">
              {{ scope.row.bufategangjintie }}
            </template>
          </el-table-column>

          <el-table-column label="公务交通" align="center">
            <template slot-scope="scope">
              {{ scope.row.gongwujiaotongbutie }}
            </template>
          </el-table-column>

          <el-table-column label="住房补贴" align="center">
            <template slot-scope="scope">
              {{ scope.row.zhufangbutie }}
            </template>
          </el-table-column>

          <el-table-column label="补发住房补贴" align="center">
            <template slot-scope="scope">
              {{ scope.row.bufazhufangbutie }}
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="其他收入" align="center">

          <el-table-column label="奖励性绩效" align="center">
            <template slot-scope="scope">
              {{ scope.row.jianglixingjixiao }}
            </template>
          </el-table-column>

          <el-table-column label="年底奖励性绩效" align="center">
            <template slot-scope="scope">
              {{ scope.row.niandijianglixingjixiao }}
            </template>
          </el-table-column>

          <el-table-column label="增量绩效" align="center">
            <template slot-scope="scope">
              {{ scope.row.zengliangjixiao }}
            </template>
          </el-table-column>

          <el-table-column label="补发基础增核" align="center">
            <template slot-scope="scope">
              {{ scope.row.bufajichuzenghe }}
            </template>
          </el-table-column>

        </el-table-column>
        <el-table-column label="应发工资" align="center">
          <template slot-scope="scope">
            <b style="color: blue; font-size: 15px;"> {{ scope.row.yingfagongzi }}</b>
          </template>
        </el-table-column>
        <el-table-column label="扣减项目" align="center">

          <el-table-column label="养老保险" align="center">
            <template slot-scope="scope">
              {{ scope.row.yanglaobaoxian }}
            </template>
          </el-table-column>

          <el-table-column label="补扣养老保险" align="center">
            <template slot-scope="scope">
              {{ scope.row.bukouyanglaobaoxian }}
            </template>
          </el-table-column>

          <el-table-column label="职业年金" align="center">
            <template slot-scope="scope">
              {{ scope.row.zhiyenianjin }}
            </template>
          </el-table-column>

          <el-table-column label="补扣职业年金" align="center">
            <template slot-scope="scope">
              {{ scope.row.bukouzhiyenianjin }}
            </template>
          </el-table-column>

          <el-table-column label="医保" align="center">
            <template slot-scope="scope">
              {{ scope.row.yibao }}
            </template>
          </el-table-column>

          <el-table-column label="公积金" align="center">
            <template slot-scope="scope">
              {{ scope.row.gongjijin }}
            </template>
          </el-table-column>

          <el-table-column label="补扣公积金" align="center">
            <template slot-scope="scope">
              {{ scope.row.bukougongjijin }}
            </template>
          </el-table-column>

          <el-table-column label="工会会费" align="center">
            <template slot-scope="scope">
              {{ scope.row.gonghuihuifei }}
            </template>
          </el-table-column>

          <el-table-column label="预扣个税" align="center">
            <template slot-scope="scope">
              {{ scope.row.yukougeshui }}
            </template>
          </el-table-column>

        </el-table-column>

        <el-table-column label="实发工资" align="center">
          <template slot-scope="scope">
            <b style="color: darkred; font-size: 16px;">{{ scope.row.shifagongzi }}</b>
          </template>
        </el-table-column>

        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            <i>{{ scope.row.remark }}</i>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px" />
      <el-pagination
        :current-page="uploadDetailDialog.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="uploadDetailDialog.pageCount"
        layout="total, sizes, prev, pager, next, jumper"
        :total="uploadDetailDialog.dataTotal"
        @size-change="onDetailPageSizeChange"
        @current-change="onDetailCurrentPageChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadDetailDialog.visible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  Message
} from 'element-ui'
import {
  websock
} from '@/websock'
const moment = require('moment')

export default {
  filters: {
    statusFilter(sta) {
      const statusMap = {
        1: 'info',
        2: 'success',
        3: 'danger'
      }
      return statusMap[sta]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      pageIndex: 1,
      pageCount: 10,
      dataTotal: 0,

      uploadUrl: process.env.VUE_APP_BASE_API + '/oa/uploadGongzi',

      uploadDetailDialog: {
        id: 0,
        visible: false,
        list: null,
        listLoading: false,
        pageIndex: 1,
        pageCount: 10,
        dataTotal: 0
      },

      newUploadDialog: {
        visible: false,
        month: ''
      }
    }
  },
  created() {
    this.getGongziUploadList()
  },
  methods: {
    getGongziUploadList() {
      this.listLoading = true
      websock.gongziUploadRecord().then(data => {
        console.log('upload record', data)
        this.listLoading = false
        this.list = data.list
        this.dataTotal = data.count
      })
    },
    getDetailGongziList() {
      this.uploadDetailDialog.listLoading = true
      websock.gongziRecordWeb({
        id: this.uploadDetailDialog.id,
        pageIndex: this.uploadDetailDialog.pageIndex,
        pageCount: this.uploadDetailDialog.pageCount
      }).then(
        (data) => {
          this.uploadDetailDialog.listLoading = false
          this.uploadDetailDialog.list = data.list
          this.uploadDetailDialog.dataTotal = data.count
        }
      )
    },
    onClickDetail(id) {
      this.uploadDetailDialog.visible = true
      this.uploadDetailDialog.id = id
      this.uploadDetailDialog.list = null
      this.uploadDetailDialog.listLoading = false
      this.uploadDetailDialog.pageIndex = 1
      this.uploadDetailDialog.dataTotal = 0
      this.getDetailGongziList()
      if (this.$refs.attaches) this.$refs.attaches.uploadFiles = []
    },
    onPageSizeChange(val) {
      this.pageCount = val
      this.getGongziUploadList()
    },
    onCurrentPageChange(val) {
      this.pageIndex = val
      this.getGongziUploadList()
    },
    onDetailPageSizeChange(val) {
      this.uploadDetailDialog.pageCount = val
      this.getDetailGongziList()
    },
    onDetailCurrentPageChange(val) {
      this.uploadDetailDialog.pageIndex = val
      this.getDetailGongziList()
    },
    formatTimeStamp(stamp) {
      return moment(stamp).format('YYYY-MM-DD')
    },
    async clickDownloadTemplate() {
      try {
        const res = await websock.gongziTemplateDownloadUrl()
        console.log('download template file', res)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = res
        a.target = '_blank'
        document.body.appendChild(a)
        a.click()
        URL.revokeObjectURL(a.href)
        document.body.removeChild(a)
      } catch (err) {
        console.error(err)
        Message({
          message: err.message || 'error',
          type: 'error',
          duration: 3 * 1000
        })
      }
    },
    uploadGongziSuccess(res) {
      console.log('upload gongzi success', res)
      if (res.code !== 0) {
        return Message({
          message: res.message || 'error',
          type: 'error',
          duration: 3 * 1000
        })
      }

      this.getGongziUploadList()
    },
    async clickNewUpload() {
      this.newUploadDialog.month = ''
      this.newUploadDialog.visible = true
    },
    async newUploadConfirm() {
      console.log(this.newUploadDialog.month)
      if (this.newUploadDialog.month === '') {
        return Message({
          message: '请选择月份',
          type: 'error',
          duration: 3 * 1000
        })
      }
      this.newUploadDialog.visible = false

      try {
        await websock.newGongziUpload({
          month: this.newUploadDialog.month
        })

        this.getGongziUploadList()
      } catch (err) {
        console.error(err)
        Message({
          message: err.message || 'error',
          type: 'error',
          duration: 3 * 1000
        })
      }
    },

    getUploadData(id) {
      return {
        id
      }
    }
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
